<template>
	<view class="container">
		<view class="mltop">
			<image class="mlt_tbg" src="/static/images/mall_banner.jpg"></image>
			<view class="mlt_t">我的积分</view>
			<view class="mlt_b">
				<view class="mlt_bnum">
					<image src="/static/images/mall_nico.png"></image>{{user.jifen}}
				</view>
				<view class="mlt_bbtn">
					<navigator hover-class="none" url="/pages/user/jfmall/record">兑换记录<text></text></navigator>
				</view>
			</view>
		</view>
		<view class="mlcontent">
			<view class="mlc_t">
				<view class="mlc_tit">积分兑换</view>
				<view class="ssbox">
					<view class="iconfont icon-sousuo"></view><input class="ssinp" type="text" @input="ikeyword"
						confirm-type="search" @confirm="search" placeholder="请输入商品名称" />
				</view>
			</view>
			<view class="list_hd">
				<scroll-view scroll-x="true" class="tab-h" v-bind:scroll-into-view="scroll_into"
					v-bind:scroll-with-animation="true">
					<view v-for="(item, index) in tab_bar" class="tab-item"
						v-bind:class="current_tab==index ? 'tab-bar-active' : ''" v-bind:key="index"
						v-bind:data-current="index" v-bind:id="item.id" v-on:click="change_tab">{{item.tit}}
						<image src="/static/images/mall_tico.png"></image>
					</view>
				</scroll-view>
			</view>
			<view class="list_bd">
				<view class="goods" v-for="i in rows" :key="i.id">
					<navigator hover-class="none" :url="'/pages/user/jfmall/goodsdetail?id='+i.id">
						<view class="goods_img">
							<image :src="i.image" alt="" mode="aspectFill"></image>
						</view>
						<view class="goods_title">{{i.name}}</view>
						<view class="goods_price"><text>{{i.point}}</text>积分</view>
						<view class="goods_btn"><text>立即兑换</text></view>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import API from "@/common/api.js";
	export default {
		data() {
			return {
				current_tab: 0, // 当前选中tab索引
				scroll_left: 0, // 当前滚动条距离左边的位置
				scroll_into: '', // 当前滚动条滚动到id位置	
				screen_width: 0, // 屏幕宽度
				tab_bar: [{
					id: 'id1',
					tit: '全部'
				}],
				list: [{
						proimg: '/static/images/proimg.jpg',
						title: '牙齿冷光美白|告别黄牙烟渍牙',
						price: '500',
						src: '/pages/user/jfmall/goodsdetail'
					},
					{
						proimg: '/static/images/proimg.jpg',
						title: '牙齿冷光美白|告别黄牙烟渍牙',
						price: '500',
						src: '/pages/user/jfmall/goodsdetail'
					},
					{
						proimg: '/static/images/proimg.jpg',
						title: '牙齿冷光美白|告别黄牙烟渍牙',
						price: '500',
						src: '/pages/user/jfmall/goodsdetail'
					},
					{
						proimg: '/static/images/proimg.jpg',
						title: '牙齿冷光美白|告别黄牙烟渍牙',
						price: '500',
						src: '/pages/user/jfmall/goodsdetail'
					},

				],
				user: [],
				keyword: "",
				rows: [],
				cateid: 0
			}
		},
		onLoad() {
			// 首次获取屏幕宽度
			uni.getSystemInfo({
				success: (res) => {
					this.screen_width = res.screenWidth
				}
			});
			var $this = this
			API.post("user/getUser").then((res) => {
				if (res.code == 1) {
					$this.user = res.data
				}
			})
			API.post("product/pointcate").then((res) => {
				if (res.code == 1) {
					$this.tab_bar = res.data
				}
			})
			this.search()
		},
		methods: {
			search() {
				var $this = this
				API.post("product/pointprd", {
					keyword: this.keyword,
					cateid: this.cateid
				}).then((res) => {
					if (res.code == 1) {
						$this.rows = res.data
					}
				})
			},
			ikeyword(e) {
				this.keyword = e.detail.value
			},
			// 点击tabbar事件
			change_tab(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				// 记录当前点击的选项位置
				this.current_tab = index
				// 如果点击了第4个以后的,滚动条向右移动屏幕的宽度
				this.scroll_into = this.tab_bar[index].id
				this.cateid = this.tab_bar[index].id
				this.search()
			}

		}
	}
</script>

<style lang="scss">
	.mltop {
		padding: 80rpx 40rpx 120rpx;
		position: relative;
		color: #fff;
		z-index: 1;
	}

	.mlt_t {
		font-size: 36rpx;
	}

	.mlt_tbg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.mlt_b {
		width: 100%;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
	}

	.mlt_bnum {
		font-size: 68rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
	}

	.mlt_bnum image {
		width: 44rpx;
		height: 44rpx;
		margin: 0 10rpx 0 0;
	}

	.mlt_bbtn {
		display: inline-block;
		margin: 0 0 0 30rpx;
		color: #25a9ed;
		background: #fff;
		line-height: 60rpx;
		border-radius: 60rpx;
		font-size: 26rpx;
		padding: 0 20rpx 0 30rpx;
	}

	.mlt_bbtn text {
		float: right;
		margin: 18rpx 0 0 16rpx;
		position: relative;
		width: 0;
		height: 0;
		border: 10rpx solid;
		border-color: transparent transparent transparent #25a9ed;
	}

	.mlcontent {
		background: #fff;
		border-radius: 40rpx 40rpx 0 0;
		padding: 30rpx 0;
		position: relative;
		z-index: 2;
		margin-top: -40rpx;
	}

	.mlc_t {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.mlc_tit {
		font-size: 36rpx;
		font-weight: bold;
		padding: 0 10% 0 10rpx;
	}

	.ssbox {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 80rpx;
		background: #fff;
		color: #222;
		font-size: 28rpx;
		position: relative;
		padding: 0 20rpx 0 90rpx;
		border: 2rpx #eee solid;
	}

	.ssbox .iconfont {
		position: absolute;
		top: 0;
		left: 24rpx;
		font-size: 48rpx;
		color: #999;
	}

	.ssinp {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		color: #444;
		font-size: 30rpx;
	}

	.list_hd {
		width: 100%;
		margin-top: 20rpx;
	}

	.list_hd ::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.tab-h {
		width: 100%;
		white-space: nowrap;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.tab-item {
		display: inline-block;
		border-radius: 50rpx;
		font-size: 32rpx;
		padding: 20rpx 30rpx;
		color: #666;
		position: relative;
	}

	.tab-item image {
		width: 36rpx;
		height: 12rpx;
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		display: none;
	}

	.tab-bar-active {
		color: $color;
	}

	.tab-item.tab-bar-active image {
		display: block;
	}

	.list_bd {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.goods {
		box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
		padding: 20rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		width: 48%;
		margin-bottom: 24rpx;
	}

	.goods_img {
		width: 100%;
		height: 290rpx;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.goods_img image {
		width: 100%;
		height: 100%;
	}

	.goods_title {
		width: 100%;
		margin-top: 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 28rpx;
	}

	.goods_price {
		color: #f47f00;
		margin-top: 10rpx;
		font-weight: bold;
	}

	.goods_price text {
		font-size: 36rpx;
	}

	.goods_btn {
		text-align: center;
	}

	.goods_btn text {
		display: inline-block;
		margin: 20rpx auto 0;
		line-height: 60rpx;
		border-radius: 60rpx;
		padding: 0 42rpx;
		background: $color;
		font-size: 28rpx;
		color: #fff;
	}
</style>